<DOCTYPE html>
    <html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="..\bootstrap3\css\bootstrap.min.css" rel="stylesheet">
        <script src="..\bootstrap3\js\jquery-1.12.4.min.js">

        </script>
        <script src="..\bootstrap3\js\bootstrap.min.js">

        </script>

    </head>
    <div class="container-fuild">
        <br>
        <br>
        <div class="col-md-6 col-md-offset-3">
            <div class="form-horizonal">
                <div class="form-group">
                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title data-original-title="左边的内容">左边显示</button>
                    <a class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上面的内容">上边显示</a>
                </div>

                <div class="form-group">
                    <a data-toggle="tooltip" title="News">Hover over me</a>
                    <div class="tooltip top">
                        <div class="tooltip-arrow">12</div>
                        <div class="tooltip-inner">sss</div>
                    </div>
                </div>
                <div class="form-group">
                    <a tabindex="0" id="pop" class="btn btn-default"  data-toggle="popover" data-trigger="focus" data-placement="top" title="提示" data-content="确认这么做？" onclick="pop_click()">上边显示</a>
                </div>
            </div>
        </div>
    </div>

    </html>
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()

        })

        function pop_click() {
            $('#pop').popover('show')
        }
    </script>